<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>KT了解一下</title>

    <link rel="stylesheet" href="/html/layui/css/layui.css">
    <script src="/html/layui/layui.js"></script>

    <link rel="stylesheet" href="/html/css/style.css">

    <!--阿里巴巴iconfont-->
    <link rel="stylesheet" href="//at.alicdn.com/t/font_681297_93gr3vr7ut.css">

    <script type="text/javascript" src="/html/js/public.js"></script>

    <style>
        .CodeMirror, .editormd-toolbar
        {
            z-index: 0!important;
        }
    </style>

    <!--引入markdown编辑器-->
    <link rel="stylesheet" href="/html/editor/editor.md-master/css/editormd.min.css">

    <!-- 引入froala编辑器 -->
    <link href="/html/editor/froala/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
    <link href="/html/editor/froala/css/froala_style.css" rel="stylesheet" type="text/css" />

</head>
<body>

<div class="kt-body">
    <div class="kt-editor-body">

        <ul class="kt-location">

            <li>
                <a href="javascript:history.back(-1);">
                    <span class="iconfont icon-siglypharrowbackward"></span>
                    返回上一页
                </a>
            </li>

            <li>
                <a href="/html">首页</a><img src="/html/images/location_bg.png">
            </li>

            <li class="active">
                <a href="javascript:;">发布</a>
                <img src="/html/images/location_bg.png">
            </li>

            <div class="kt-clear"></div>
        </ul>

        <div class="kt-release">
            <form action="" class="layui-form">

                <fieldset class="layui-elem-field layui-field-title">
                    <legend>
                        <span class="iconfont icon-bianji1"></span>
                        <span>文章信息</span>
                    </legend>
                </fieldset>

                <div class="layui-form-item">
                    <label class="layui-form-label">文章标题 <span style="color:#FF5722">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" name="name" lay-verify="required" placeholder="请输入收件人邮箱地址" class="layui-input" value="">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">缩略图 <span style="color:#FF5722">*</span></label>
                    <div class="layui-input-block">
                        <div class="layui-upload kt-upload">
                            <div class="kt-upload-show">
                                <img class="kt-headpic-show" onload="KtImgLoad(this)" onerror="KtImgError(this);" src="" />
                                <p id="kt-headpic-text"></p>
                                <span class="iconfont icon-guanbi"></span>
                            </div>
                            <label class="kt-upload-btn">
                                <span>上传图片</span>
                                <input id="file" class="layui-upload-file" type="file" name="file">
                            </label>
                            <div class="kt-clear"></div>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">文章类型 <span style="color:#FF5722">*</span></label>
                    <div class="layui-input-block">
                        <input type="checkbox" lay-skin="switch" checked="" lay-filter="switchType" lay-text="原创|转载">
                    </div>
                </div>
                <div class="layui-form-item kt-form-option" style="display:none">
                    <label class="layui-form-label">来源 <span style="color:#FF5722">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" name="for" lay-verify="required" placeholder="请输入转载来源" class="layui-input" value="">
                    </div>
                </div>
                <div class="layui-form-item kt-form-option" style="display:none">
                    <label class="layui-form-label">原文链接 <span style="color:#FF5722">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" name="for_url" lay-verify="required" placeholder="请输入原文链接地址" class="layui-input" value="">
                    </div>
                </div>

                <fieldset class="layui-elem-field layui-field-title">
                    <legend>
                        <span class="iconfont icon-xiezuo"></span>
                        <span>文章内容</span>
                    </legend>
                </fieldset>

                <div class="layui-form-item">

                    <blockquote class="layui-elem-quote">
                        <span class="iconfont icon-tubiaozhizuomoban-x-" style="margin-right:5px;font-size:20px;"></span>
                        <span>
                            您当前使用的是 <span class="is-one">MarkDown 编辑器</span>，您可以切换为
                            <a href="javascript:;" class="kt-editor-switch"><b class="other-one">Froala 富文本编辑器</b></a>
                    </span>
                    </blockquote>

                    <input type="hidden" name="editortype" value="editormd">
                    <div class="kt-editor">
                        <div id="editormd">
                            <textarea name="contents" style="display:none;"></textarea>
                        </div>
                    </div>
                </div>


                <div class="layui-form-item kt-submit">
                    <button class="layui-btn" type="submit">确认发布</button>
                    <button class="layui-btn layui-btn-primary" type="reset">清空</button>
                </div>
            </form>
        </div>

        <div class="kt-clear"></div>
    </div>
</div>

<script type="text/javascript" src="/html/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="/html/editor/editor.md-master/editormd.min.js"></script>
<script type="text/javascript" src="/html/editor/froala/js/froala_editor.pkgd.min.js"></script>
<script type="text/javascript" src="/html/editor/froala/js/languages/zh_cn.js"></script>


<script>
    layui.use([
        'form',
    ], function () {
        var form = layui.form;

        form.render();

        // markdown编辑器初始化
        editormd("editormd", {
            path : "/html/editor/editor.md-master/lib/",
            height: 700,
            toolbarAutoFixed: false
        });

        // 编辑器切换
        $(document).find('.kt-editor-switch').unbind('click').click(function () {

            // 判断当前编辑器类型
            var type = $('input[name="editortype"]').val();

            if( type == 'editormd' ){

                // 重制编辑器
                $(".kt-editor").html("<textarea name=\"contents\"></textarea>");
                $('input[name="editortype"]').val('froala');
                $('.is-one').html("Froala 富文本编辑器");
                $('.other-one').html("MarkDown 编辑器");

                /*编辑器初始化*/
                $('textarea[name="contents"]').froalaEditor({

                    language: 'zh_cn', 	/*设置语言*/
                    heightMin: 700, 	/*最小高度*/
                    heightMax: 700,		/*最大高度*/
                    htmlDoNotWrapTags: ['script', 'style', 'link'], // 过滤的标签
                    // htmlAllowedAttrs: ['title', 'href', 'alt', 'src', 'style'], //允许存在的属性
                    toolbarButtons: [
                        'fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '|', 'fontFamily', 'fontSize', 'color', 'inlineStyle',
                        'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', '-', 'insertLink', 'insertImage',
                        'embedly','insertTable', '|', 'emoticons', 'specialCharacters', 'insertHR', 'selectAll', 'clearFormatting', '|',
                        'print', 'help', '|', 'undo', 'redo','insert','html'
                    ],/*支持的按钮功能*/

                    toolbarInline: false, /*禁止编辑器的内联编辑器*/

                    quickInsertButtons: ['image'], /*设置快速插入功能按钮*/
                    imageMove: true,
                    dragInline: false, /*设置图片拖动排版*/
                    imageUploadURL: '{:url("Upload/do")}', /*设置图片上传后台地址*/
                    imageUploadParams: {'dir_name':'member_article_img/{$userInfo.id}','type':'froala'}, /*上传携带参数*/
                    imageMaxSize: 2*1024*1024,/*设置上传图片大小2M*/

                })
                // 内容改变事件
                .on('froalaEditor.contentChanged', function (e, editor) {

                    /*获取编辑器长度*/
                    strlen = editor.charCounter.count();

                    if(strlen > 10000){

                    }
                    /*设置剩余可输入字数*/
                    $('.kt-textarea>form>p:last-child>span>span').html(10000-strlen);

                });
            }else{

                // 重制编辑器
                $(".kt-editor").html("<div id=\"editormd\"><textarea name=\"contents\" style=\"display:none;\"></textarea></div>");
                $('input[name="editortype"]').val('editormd');
                $('.is-one').html("MarkDown 编辑器");
                $('.other-one').html("Froala 富文本编辑器");

                editormd("editormd", {
                    path : "/html/editor/editor.md-master/lib/",
                    height: 700,
                    toolbarAutoFixed: false
                });
            }
        });

        /*监听开关选择*/
        form.on('switch(switchType)', function(data){
            if(this.checked){
                $('.kt-form-option').slideUp();
            }else{
                $('.kt-form-option').slideDown();
            }
        });

        /**
         * [label选择文件]
         */
        $(document).on('change','.layui-form input[type="file"]',function(){

            fun.chooseFile.show($(this),this.files[0]);

        });

        // 关闭图片
        $(document).on('click', '.kt-upload-show .icon-guanbi', function () {

            fun.chooseFile.hide($(this));
        });

    });

</script>

</body>
</html>
